---
import VideoHeader from '../../components/VideoHeader.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getAllVideos, type VideoFileType } from '../../lib/video';

export interface Props {
  video: VideoFileType;
}

export const prerender = true;

export async function getStaticPaths() {
  const videos = await getAllVideos();

  return videos.map((video) => ({
    params: { videoId: video.id },
    props: { video },
  }));
}

const { videoId } = Astro.params;
const { video } = Astro.props;
---

<BaseLayout
  title={video.frontmatter.title}
  description={video.frontmatter.description}
  permalink={`/videos/${videoId}`}
>
  <VideoHeader video={video} />

  <div class='bg-gray-50 py-5 sm:py-10'>
    <div
      class='container prose prose-h2:mb-2 prose-h2:mt-4 prose-h2:text-3xl prose-h3:mt-2 prose-code:bg-transparent prose-img:mt-1'
    >
      <video.Content />
    </div>
  </div>
</BaseLayout>
